<template>
  <view class="app">
    <view class="content">
      <camera
          :device-position="device"
          flash="auto"
          mode="normal"
          resolution="medium"
          style="width: 100%; height: 100%;"
          @error="onCameraError"
      />
    </view>

    <view class="btn">
      <view class="row">
        <view class="flash" @click="flashImages">
          <image :src="images" class="image"/>
        </view>
        <view class="photograph" @click="onPhone">
          <view class="center">
            <view class="c">
            </view>
          </view>
        </view>
        <view class="cut" @click="checkoutDevice">
          <image :src="checkou" class="image"/>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {BASE_URL} from '@/api/request'
import {ref} from 'vue'
import images from '@/static/image/image.png'
import checkou from '@/static/image/checkout.png'

const photoPath = ref('')
const device = ref('front')

const onCameraError = (e) => {
  console.log('摄像头出错：', e)
}

const onPhone = () => {
  const ctx = uni.createCameraContext()
  uni.showToast({
    title: '拍照成功!~',
    icon: 'loading',
    duration: 500,
    mask: true,
    success: () => {
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log('照片临时路径:', res.tempImagePath)
          photoPath.value = res.tempImagePath
          uni.navigateTo({
            url: '/pages/position/edit?data=' + photoPath.value
          })
        },
        fail: (err) => {
          uni.showToast({
            title: '摄像头异常' + err
          })
          photoPath.value = ''
        }
      })
    }
  })
}

const checkoutDevice = () =>{
  device.value === 'front' ? device.value = 'back' : device.value = 'front'
}

const flashImages = () =>{
  uni.chooseImage({
    count: 1, // 最多选择图片数量
    sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
    sourceType: ['album'], // 只从相册选择，如果想拍照可加 'camera'
    success: function (res) {
      console.log('选择的图片信息:', res);
      const tempFilePaths = res.tempFilePaths; // 临时文件路径数组
      // 如果你要展示在 <image> 里：
      // this.imageSrc = tempFilePaths[0];
      photoPath.value = tempFilePaths[0]
      uni.navigateTo({
        url: '/pages/position/edit?data=' + photoPath.value
      })
    },
    fail: function (err) {
      uni.showToast({
        title: '用户未选择',
        icon: 'none',
      })
      console.log('选择失败:', err);
    }
  })
}
</script>

<style scoped lang="scss">
.app {
  //border: 1px solid red;
  width: 100%;
  height: calc(100vh);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 35rpx;
  background: rgba(82, 91, 106);
  overflow: hidden;

  .content {
    //border: 1px solid red;
    width: 100%;
    height: 50%;
    border-radius: 105rpx;
    background: white;
    overflow: hidden;
  }

  .btn {
    //border: 1px solid red;
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    .row {
      //border: 1px solid red;
      width: 100%;
      height: 180rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .flash {
        //border: 1px solid red;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 55rpx;
        background: white;
        box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.25);

        .image {
          width: 50rpx;
          height: 50rpx;
        }
      }

      .photograph {
        //border: 1px solid red;
        width: 140rpx;
        height: 140rpx;
        margin-right: 55rpx;
        border-radius: 50%;
        background: rgb(30, 90, 227);
        display: flex;
        justify-content: center;
        align-items: center;

        .center {
          //border: 1px solid red;
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
          background: white;
          display: flex;
          justify-content: center;
          align-items: center;

          .c {
            //border: 1px solid red;
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            background: rgb(30, 90, 227);
          }
        }
      }

      .cut {
        //border: 1px solid red;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        background: white;
        box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.25);
        display: flex;
        justify-content: center;
        align-items: center;

        .image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}
</style>